<template>
  <!--
  @name: HyElInput
  @data: 2024/4/15 16:43
  二次封装element-input组件

  用法与element-plus基本相同，只有自定义的字段与原有的element-plus
  不同

  注意,这里的el-input只适用于普通文本,不适用于自适应文本
-->
  <div id="hy-el-input">
    <span v-if="props.isReadonly">{{ form[props.field] }}</span>
<!--    <span v-else>哈哈</span>-->
    <el-input
      v-else
      :id="props.id"
      v-model="form[props.field]"
      :placeholder="props.placeholder"
      :show-password="props.showPassword"
      :size="props.size as any"
      :show-word-limit="props.showWordLimit"
      :clearable="props.clearable"
      :formatter="props.formatter as Function"
      :parser="props.parser as Function"
      :disabled="props.disabled"
      :prefix-icon="props.prefixIcon as any"
      :resize="props.resize as any"
      :tabindex="props.tabindex"
      :validate-event="props.validateEvent"
      :input-style="props.inputStyle as string"
      @focus="props.focus"
      @blur="props.blur"
      @change="props.change"
      @click="props.click"
    />
  </div>

</template>
<script setup lang="ts">
//StyleValue为css样式类型
import projectRequest from "@/api";
import {hyElementRequest} from "@/components/utils";
import type {UserListPageVO} from "@/api/test";

/**
 * 这里的类型定义如果让我们一一去写,过于麻烦,所以我们去下源码
 * 复制一下
 * 但是我们复制过来的props不可能全部会用到
 */

const props = defineProps({
  /**-------------以下是HyElInput自定义属性----------------*/
  /**
   * 关于修改子组件中的值,
   * 由于JS的对象和数组是按引用传递,所以当我们修改form中的属性时,
   * 实际上是可以修改的
   * 但是,对于Vue来说,禁止这样的改动，虽然可能生效，
   * 但有很大的性能损耗，比较得不偿失
   * 所以,我们将form单独提出来,使用defineModelAPI
   * 不再放在defineProps中
   */
  field: {
    type: String,
    default: ""
  },
  url: {
    type: String,
  },
  method: {
    type: String,
    default: "GET"
  },
  params: {
    type: Object,
    default: () => {
    }
  },
  data: {
    type: Object,
    default: () => {
    }
  },
  /**-----------------------------*/
  /**
   * @description native input id
   */
  id: {
    type: String,
    default: undefined,
  },
  /**
   * @description input box size
   */
  size: {
    type: String,
  },
  /**
   * @description whether to disable
   */
  disabled: Boolean,
  /**
   * @description binding value
   */
  modelValue: {},
  /**
   * @description same as `maxlength` in native input
   */
  maxlength: {
    type: [String, Number],
  },
  /**
   * @description same as `minlength` in native input
   */
  minlength: {
    type: [String, Number],
  },
  /**
   * @description type of input
   */
  type: {
    type: String,
    default: 'text',
  },
  /**
   * @description control the resizability
   */
  resize: {
    type: String,
    values: ['none', 'both', 'horizontal', 'vertical'],
  },
  /**
   * @description whether textarea has an adaptive height
   */
  autosize: {
    type: Boolean,
    default: false,
  },
  /**
   * @description native input autocomplete
   */
  autocomplete: {
    type: String,
    default: 'off',
  },
  /**
   * @description format content
   */
  formatter: {
    type: Function,
  },
  /**
   * @description parse content
   */
  parser: {
    type: Function,
  },
  /**
   * @description placeholder
   */
  placeholder: {
    type: String,
  },
  clearable: {
    type: Boolean,
    default: false,
  },
  showPassword: {
    type: Boolean,
    default: false,
  },
  showWordLimit: {
    type: Boolean,
    default: false,
  },
  suffixIcon: {},
  prefixIcon: {},
  containerRole: {
    type: String,
    default: undefined,
  },
  tabindex: {
    default: 0,
  },
  validateEvent: {
    type: Boolean,
    default: true,
  },
  inputStyle: {},
  autofocus: {
    type: Boolean,
    default: false,
  },
  focus: Function,
  blur: Function,
  change: Function,
  click: Function,
  requestCallback: Function,
  responseCallback: Function,
  regExpCallback: Function,
  isReadonly: {
    type: Boolean,
    default: false,
  }
});
/**
 * 关于defineModel
 * 这个宏可以用来声明一个双向绑定 prop，通过父组件的 v-model 来使用。
 * defineModel接收两个参数
 * 第一个是在父组件中使用时,所要传入的名称
 * 第二个这位类型,默认值
 *
 * 其返回两个参数,可以使用解构
 */
const form = defineModel("form", {
  type: Object,
  default: () => {
  },
});

if (props.url) {
  hyElementRequest<any, any, UserListPageVO>(
    props.method,
    props.url,
    props.data,
    props.params,
    props.requestCallback,
    props.responseCallback
  );
}


</script>
<style scoped>
#hy-el-input{

}
</style>
